<!doctype html>
<html class="no-js">
<script src="../js/head.js"></script>
<body>
<script src="../js/header.js"></script>
<div class="am-cf admin-main">
    <!-- sidebar start -->
    <script src="../js/sidebar.js"></script>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content" id="content-body">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">员工请假申请</strong>
                </div>
            </div>
            <hr>
            <table id="dg" title="员工请假申请" class="easyui-datagrid" style="width:auto"
                   toolbar="#toolbar" pagination="true"
                   rownumbers="true" fitColumns="true" singleSelect="true" data-options="fit:true,fitColumns:true,onSelect:selectRow">
                <thead>
                <tr>
                    <th field="id" width="50" sortable="true" hidden>编号</th>
                    <th field="uid" width="50" sortable="true" hidden>员工编号</th>
                    <th field="employeeName" width="50">员工</th>
                    <th field="departmentName" width="50">所在部门</th>
                    <th field="startTime" width="50" data-options="formatter:dateFormatter">开始时间</th>
                    <th field="endTime" width="50" data-options="formatter:dateFormatter">截止时间</th>
                    <th field="type" width="50" hidden>请假类型</th>
                    <th field="typeName" width="50">请假类型</th>
                    <th field="state" width="70" data-options="formatter:stateFormatter">审批状态</th>
                    <th field="total" width="50">总时长（天）</th>
                    <th field="instructions1" width="100">部门经理审批意见</th>
                    <th field="instructions2" width="100">副总经理审批意见</th>
                    <th field="instructions3" width="100">总经理审批意见</th>
                    <th field="reason" width="100">事由</th>
                    <th field="memo" width="50">备注</th>
                </tr>
                </thead>
            </table>
            <div id="toolbar">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
                   onclick="editUser()" id="edit">审批</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true"
                   onclick="approvalApply()" id="approval">待审批申请</a>

                <form class="form-inline" id="searchForm">
                    <div class="form-group">
                        请假类型:
                        <input class="easyui-combobox" name="type" style="width:auto;height:26px;"
                               data-options="
                        valueField:'id',
                        textField:'name',
                        url:'../type?rows=100000',
                        method:'get',
                        loadFilter: function (data){
                            return data.result.list;
                        }" editable="false">
                    </div>

                    <div class="form-group">
                        员工:
                        <input class="easyui-combobox" name="uid" style="width:auto;height:26px;"
                               data-options="
                        valueField:'id',
                        textField:'name',
                        url:'../employee?rows=100000',
                        method:'get',
                        loadFilter: function (data){
                            return data.result.list;
                        }" editable="false">
                    </div>
                    <div class="form-group">
                        事由:　　
                        <input type="text" class="easyui-textbox" name="reason"
                               validType="string[0,255]">
                    </div>
                    <br/>
                    <div class="form-group">
                        申请时间:
                        <input id="start" type="text" class="easyui-datebox" name="start"
                               validType="dateBefore"
                               editable="false">
                        --至--
                        <input id="end" type="text" class="easyui-datebox" name="end"
                               validType="dateAfter"
                               editable="false">
                    </div>

                    <div class="form-group" id="state">
                        审批状态:
                        <select class="easyui-combobox" editable="false" panelHeight="auto" style="width:174px"
                                name="state">
                            <option value="" selected>所有</option>
                            <option value="0">未审批</option>
                            <option value="1">部门经理已审批</option>
                            <option value="2">副总经理已审批</option>
                            <option value="3">总经理已审批</option>
                            <option value="4">驳回</option>
                            <option value="5">通过</option>
                        </select>
                    </div>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="applySearch()">查询</a>
                </form>
            </div>

            <div id="dlg" class="easyui-dialog" style="width:400px"
                 closed="true" buttons="#dlg-buttons">
                <form id="fm" novalidate style="margin:0;padding:20px 50px">
                    <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">申请信息</div>
                    <div class="form-group" hidden>
                        编号:　　　　　　
                        <input type="number" class="easyui-textbox" name="id" validType="" readonly>
                    </div>
                    <div class="form-group">
                        请假员工:　　　　
                        <input id="employeeId" readonly class="easyui-combobox" name="uid" style="width:auto;height:26px;"
                               data-options="
                        valueField:'id',
                        textField:'name',
                        url:'../employee?rows=100000',
                        method:'get',
                        loadFilter: function (data){
                            return data.result.list;
                        }" editable="false">
                    </div>
                    <div class="form-group">
                        所在部门:　　　　
                        <input readonly class="easyui-combobox" name="departmentId" style="width:auto;height:26px;"
                               data-options="
                        valueField:'id',
                        textField:'name',
                        url:'../department?rows=100000',
                        method:'get',
                        loadFilter: function (data){
                            return data.result.list;
                        }" editable="false">
                    </div>
                    <div class="form-group">
                        开始时间:　　　　
                        <input type="text" class="easyui-datebox" name="start" validType="dateBefore" readonly>
                    </div>
                    <div class="form-group">
                        截止时间:　　　　
                        <input type="text" class="easyui-datebox" name="end" validType="dateAfter" readonly>
                    </div>
                    <div class="form-group">
                        总天数:　　　　　
                        <input id="total" type="number" class="easyui-textbox" name="total" validType="" readonly>
                    </div>
                    <div class="form-group">
                        请假类型:　　　　
                        <input id="typeId" readonly class="easyui-combobox" name="type" style="width:auto;height:26px;"
                               data-options="
                        valueField:'id',
                        textField:'name',
                        url:'../type?rows=100000',
                        method:'get',
                        loadFilter: function (data){
                            return data.result.list;
                        }" editable="false">
                    </div>
                    <div class="form-group">
                        事由:　　　　　　
                        <input type="text" class="easyui-textbox" name="reason"
                               validType="string[0,255]" readonly>
                    </div>
                    <div class="form-group">
                        部门经理审批意见:
                        <input type="text" class="easyui-textbox" name="instructions1"
                               validType="string[0,255]" id="instructions1" readonly>
                    </div>
                    <div class="form-group">
                        副总经理审批意见:
                        <input type="text" class="easyui-textbox" name="instructions2"
                               validType="string[0,255]" id="instructions2" readonly>
                    </div>
                    <div class="form-group">
                        总经理审批意见:　
                        <input type="text" class="easyui-textbox" name="instructions3"
                               validType="string[0,255]" id="instructions3" readonly>
                    </div>
                    <div class="form-group">
                        是否批准:　　　　
                        <input type="text" class="easyui-switchbutton"
                               validType="" data-options="onText:'同意',offText:'驳回'" checked id="decision">
                    </div>
                </form>
            </div>
            <div id="dlg-buttons">
                <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()"
                   style="width:90px">确定</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
                   onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
            </div>
            <script src="../js/footer.js"></script>
        </div>
        <!-- content end -->
    </div>

    <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
       data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
</div>
<script src="../js/util.js"></script>
<script>
    var chooseRow;
    var param;

    function editUser() {
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            row.start = new Date(row.startTime).Format("yyyy-MM-dd");
            row.end = new Date(row.endTime).Format("yyyy-MM-dd");
            $('#dlg').dialog('open').dialog('center').dialog('setTitle', '修改');
            if(current.job == 1){   //总经理
                $('#instructions3').textbox('readonly',false);
            }else if(current.job == 2){ //副经理
                $('#instructions2').textbox('readonly',false);
            }else if(current.job == 5){ //部门经理
                $('#instructions1').textbox('readonly',false);
            }
            $('#fm').form('load', row);
            chooseRow = row;
        }
    }
    function saveUser() {
        var data = JSON.form2param($('#fm').serializeArray());
        var decision = $("#decision").switchbutton('options').checked;
        if(!decision){  //驳回
            data.state = 4;
            $.ajax({
                type: 'get',
                dataType: 'json',
                url: '../vacation',
                data: {uid:$("#employeeId").combobox("getValue"),type:$("#typeId").combobox("getValue")},
                success: function (response) {
                    if (response.success) {
                        if(response.result.list.length != 0){
                            $.ajax({
                                type: 'put',
                                dataType: 'json',
                                url: '../vacation',
                                data: {id:response.result.list[0].id,rest:parseInt(response.result.list[0].rest) + parseInt($("#total").numberbox("getValue"))},
                                success: function (response) {
                                    if (response.success) {
                                        if(response.result.list.length != 0){

                                        }
                                    }
                                }
                            })
                        }
                    }
                }
            })
        }else{
            if(current.job == 1){   //总经理
                data.state = 5;
            }else if(current.job == 2){ //副经理
                data.state = 2;
                if(data.total <= 5){
                    data.state = 5;
                }
            }else if(current.job == 5){ //部门经理
                data.state = 1;
            }
        }
        $.ajax({
            type: "put",
            dataType: 'json',
            url: '../apply',
            data: data,
            success: function (result) {
                if (result.success) {
                    $('#dlg').dialog('close');        // close the dialog
                    $('#dg').datagrid('reload');    // reload the user data
                } else {
                    $.messager.show({    // show error message
                        title: 'Error',
                        msg: result.message
                    });
                }
            }
        });
    }
    function applySearch() {
        if ($("#searchForm").form('validate')) {
            var jsondata = JSON.form2param($('#searchForm').serializeArray());
            if(param != ""){
                jsondata.state = 5;
            }
            $('#dg').datagrid('load', jsondata);
        }
    }

    function approvalApply(){
        var state;
        if(current.job == 1){   //总经理
            state = 2;
        }else if(current.job == 2){ //副经理
            state = 1;
        }else if(current.job == 5){ //部门经理
            state = 0;
        }else{
            state = 6;
        }
        $('#dg').datagrid('load', {"state":state});
    }

    $(function () {
        param = "";
        if(current.job != 1 && current.job != 2 && current.job != 5){
            $("#edit").hide();
            $("#state").hide();
            $('#approval').hide();
            param = "?state=5";
        }

        $("#dg").datagrid({
            url: "../apply"+param,
            method: 'get',
            loadFilter: function (data) {
                return {
                    "total": data.result.total,
                    "rows": data.result.list
                }
            }
        });


    });

    function selectRow(index,row){
        if(current.job == 1 && row.state == 2){   //总经理
            $("#edit").show();
        }else if(current.job == 2 && row.state == 1){ //副经理
            $("#edit").show();
        }else if(current.job == 5 && row.state == 0){
            $("#edit").show();
        }else{
            $("#edit").hide();
        }
    }

    $.extend($.fn.validatebox.defaults.rules, {
        lengthAndRange: {
            validator: function(value, param){
                var value = $.trim(value);
                return value.length >= param[0] && value.length <= param[1] && value >= param[2];
            },
            message: 'Please enter at least {0} characters and less than {1} characters, larger than {2}.'
        },
        dateBefore:{
            validator: function(value, param){
                var end = $('#end').datebox('getValue');
                console.log("end date:"+end);
                if (end){
                    return value <= end;
                }
                else{
                    return true;
                }
            },
            message: 'Please enter a valid date.'
        },
        dateAfter:{
            validator: function(value, param){
                var start = $('#start').datebox('getValue');
                console.log("start date:"+end);
                if (end){
                    return value >= start;
                }
                else{
                    return true;
                }
            },
            message: 'Please enter a valid date.'
        },
        string:{
            validator: function(value, param){
                var value = $.trim(value);
                return value.length >= param[0] && value.length <= param[1];
            },
            message: 'string lenght should be between {0} and {1}.'
        }

    })
</script>
</body>
</html>
